<template>
  <div id="app">
    <router-view/>
    <div class="app-model">
      <Modal :mask-closable="false" class-name="vertical-center-modal" v-model="ctl.show" :closable="false"
             :width="500" :footer-hide="true">
        <div class="sr-token">
          <div class="icon-bg"></div>
          <div class="des">{{des}}</div>
        </div>
        <div class="login-con">
          <div class="login-div">
            <div class="reLogin" @click="toLogin">重新登录</div>
          </div>
        </div>
      </Modal>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        ctl: {
          show: false
        },
        des: '请重新登录'
      };
    },
    methods: {
      toLogin() {
        window.sessionStorage.clear();
        this.$router.push({path: '/login'});
        this.ctl.show = false;
      },
      logout(val) {
        this.des = val.msg;
        this.ctl.show = true;
      },
      popMessage(error) {
        this.$Message.error(error.msg);
      }
    },
    mounted() {
      window.Bus.$on('yolo_sys_out_emit', this.logout);
      window.Bus.$on('yolo_pop_message_emit', this.popMessage);
    }
  };
</script>

<style lang="scss">
  .vertical-center-modal{
    display: flex;
    align-items: center;
    justify-content: center;
    .ivu-modal{
      top: 0;
    }
  }
</style>
<style lang="scss" scoped="scoped">
  .sr-token {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    .icon-bg {
      margin-top: 3.125rem;
      background: url("/static/images/icon_noauthority.png") no-repeat center center;
      background-size: contain;
      width: 18.125rem;
      height: 8.5rem;
    }
    .des {
      font-family: MicrosoftYaHei;
      font-size: 1.125rem;
      font-weight: normal;
      font-stretch: normal;
      line-height: 4.125rem;
      letter-spacing: 0rem;
      color: #23262b;
      text-align: center;
    }
  }
  .login-con {
    display: flex;
    justify-content: center;
    margin-bottom: 1.56rem;
    .login-div {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 6.25rem;
      height: 2.375rem;
      background-color: #015293;
      border-radius: 0.25rem;
      .reLogin {
        font-family: MicrosoftYaHei;
        font-size: 0.438rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 4.063rem;
        letter-spacing: 0rem;
        color: #ffffff;
      }
    }
  }
</style>
<style>
  * {
    margin: 0;
    padding: 0;
    font-family: PingFangSC-Regular,PingFangSC-Light, PingFangSC-Thin, sans-serif;
  }
  body, html {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
  }
  #app {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    height: 100%;
  }
</style>
